<template>
	<view class="add-more-main">
		<view class="li-title">{{liTitle}}</view>
		<view class="" v-if="type=='审批人'">
			<view class="add-more-body">
				<view class="pers-list" v-for='(it,i) in users' :key='i'>
					<view class="pers-pic">
						<view class="">
							<u-avatar :text="it.userName.slice(1)" :fontSize="it.userName.length > 2?12:15"
								shape="square" size="35" bgColor="#0087FC">
							</u-avatar>
							<view class="pers-close" style="" @click="closeUser(it,i)">
								<u-icon name="close" color="#ffffff" size="1rpx" customStyle="line-height: 20rpx;" bold>
								</u-icon>
							</view>
						</view>
						<view class="pers-icon">
							<u-icon name="arrow-right" color="#cdcdcd" size="20rpx" bold></u-icon>
						</view>
					</view>
					<text class="pers-name">{{it.userName}}</text>
				</view>
				<view class="pers-list plus-style" @click="gotoPage('/subPackTask/work/cy/scgy/choose?type=审批人')">
					<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
					<view class="">
						<uni-text class="span-style" v-show="users.length==0">
							<span>*</span>
						</uni-text>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="type=='抄送人'">
			<view class="add-more-body">
				<view class="pers-list" v-for='(it,i) in ccs' :key='i'>
					<view class="pers-pic">
						<view class="">
							<u-avatar :text="it.userName.slice(1)" :fontSize="it.userName.length > 2?12:15"
								shape="square" size="35" bgColor="#0087FC">
							</u-avatar>
							<view class="pers-close" style="" @click="closeCc(it, i)">
								<u-icon name="close" color="#ffffff" size="1rpx" customStyle="line-height: 20rpx;" bold>
								</u-icon>
							</view>
						</view>
						<view class="pers-icon">
							<u-icon name="plus" color="#cdcdcd" size="20rpx" bold></u-icon>
						</view>
					</view>
					<text class="pers-name">{{it.userName}}</text>
				</view>
				<view class="card-plus-s plus-style" @click="gotoPage('/subPackTask/work/cy/scgy/choose?type=抄送人')">
					<u-icon name="plus" color="#a3a3a3" size="22"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:'',
				liTitle: '',
				users: [],
				ccs: [],
				isShow: false
			}
		},
		onLoad(option) {
			this.type = option.type;
			this.users = option.userList && JSON.parse(decodeURIComponent(option.userList))
			this.ccs = option.ccList && JSON.parse(decodeURIComponent(option.ccList))
			if (this.type == '审批人') {
				this.liTitle = this.users.length + '人依次审批'
				this.noticeTitle = '审批人'
			} else if (this.type == '抄送人') {
				this.liTitle = '抄送' + this.ccs.length + '人'
				this.noticeTitle = '抄送人'
			}
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.noticeTitle
			})
		},
		methods: {
			setUsers(e) {
				this.users.forEach(its => {
					e.forEach(eIts => {
						if (its.userId == eIts.userId) {
							let getLocation = e.indexOf(eIts);
							e.splice(getLocation, 1)
						}
					})
				})
				this.users = this.users.concat(e)
				this.liTitle = this.users.length + '人依次审批'
				// if(this.userList!=""){
				// 	this.stepCurrent=0;
				// }
			},
			setCc(e) {
				this.ccs.forEach(its => {
					e.forEach(eIts => {
						if (its.userId == eIts.userId) {
							let getLocation = e.indexOf(eIts);
							e.splice(getLocation, 1)
						}
					})
				})
				this.ccs = this.ccs.concat(e)
				this.liTitle = '抄送' + this.ccs.length + '人'
			},
			onBackPress(e) {
				// return true 表示禁止默认返回
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				prevPage.$vm.t = 'add-more'
				if (this.type == "审批人") {
					prevPage.$vm.setUsers(this.users);
				} else if (this.type == "抄送人") {
					prevPage.$vm.setCc(this.ccs);
				}
				return false
			},
			closeUser(it, i) {
				this.users.forEach(its => {
					if (its.userId == it.userId) {
						this.users.splice(i, 1)
						this.liTitle = this.users.length + '人依次审批'
					}
				})
			},
			closeCc(it, i) {
				this.ccs.forEach(its => {
					if (its.userId == it.userId) {
						this.ccs.splice(i, 1)
						this.liTitle = '抄送' + this.ccs.length + '人'
					}
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
		color: #333333;
	}

	.add-more-main {
		padding: 30rpx 20rpx;
	}

	.li-title {
		color: #a5a5a5;
		font-size: 30rpx;
	}

	.add-more-body {
		display: flex;
		flex-direction: row;
		justify-content: start;
		margin-top: 25rpx;
		padding: 0 28rpx;
		flex-wrap: wrap;
	}

	.pers-list {
		margin-right: 58rpx;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.pers-pic {
		height: 70rpx;
	}

	.pers-close {
		background-color: rgb(198, 199, 203);
		width: 18rpx;
		height: 18rpx;
		border-radius: 18rpx;
		padding: 5rpx;
		position: absolute;
		margin-top: -80rpx;
		margin-left: 55rpx;

	}

	.pers-icon {
		position: relative;
		top: -50rpx;
		left: 88rpx;
		width: 26rpx;
	}

	.pers-name {
		color: #a5a5a5;
		font-size: 25rpx;
	}

	.plus-style {
		border: 1rpx solid #ededed;
		padding: 15rpx;
		margin-bottom: 40rpx;
		position: relative;
		height: 45rpx;
		border-radius: 15rpx;
	}

	.span-style {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		color: red;
		font-size: 50rpx;
		width: 20rpx;
		height: 20rpx;
		line-height: 35rpx;
		text-align: center;

	}
</style>
